<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="style.css">
    <title>蛇棋</title>
</head>

<body>
    <div class="main">
        <div class="main-first">
            <div class="row">
                <div class="clo">91</div>
                <div class="clo">92</div>
                <div class="clo">93</div>
                <div class="clo">94</div>
                <div class="clo">95</div>
                <div class="clo">96</div>
                <div class="clo">97</div>
                <div class="clo">98</div>
                <div class="clo">99</div>
                <div class="clo">100</div>
            </div>
            <div class="row">
                <div class="clo">90</div>
                <div class="clo">89</div>
                <div class="clo">88</div>
                <div class="clo">87</div>
                <div class="clo">86</div>
                <div class="clo">85</div>
                <div class="clo">84</div>
                <div class="clo">83</div>
                <div class="clo">82</div>
                <div class="clo">81</div>
            </div>
            <div class="row">
                <div class="clo">71</div>
                <div class="clo">72</div>
                <div class="clo">73</div>
                <div class="clo">74</div>
                <div class="clo">75</div>
                <div class="clo">76</div>
                <div class="clo">77</div>
                <div class="clo">78</div>
                <div class="clo">79</div>
                <div class="clo">80</div>
            </div>
            <div class="row">
                <div class="clo">70</div>
                <div class="clo">69</div>
                <div class="clo">68</div>
                <div class="clo">67</div>
                <div class="clo">66</div>
                <div class="clo">65</div>
                <div class="clo">64</div>
                <div class="clo">63</div>
                <div class="clo">62</div>
                <div class="clo">61</div>
            </div>
            <div class="row">
                <div class="clo">51</div>
                <div class="clo">52</div>
                <div class="clo">53</div>
                <div class="clo">54</div>
                <div class="clo">55</div>
                <div class="clo">56</div>
                <div class="clo">57</div>
                <div class="clo">58</div>
                <div class="clo">59</div>
                <div class="clo">60</div>
            </div>
            <div class="row">
                <div class="clo">41</div>
                <div class="clo">42</div>
                <div class="clo">43</div>
                <div class="clo">44</div>
                <div class="clo">45</div>
                <div class="clo">46</div>
                <div class="clo">47</div>
                <div class="clo">48</div>
                <div class="clo">49</div>
                <div class="clo">50</div>
            </div>
            <div class="row">
                <div class="clo">40</div>
                <div class="clo">39</div>
                <div class="clo">38</div>
                <div class="clo">37</div>
                <div class="clo">36</div>
                <div class="clo">35</div>
                <div class="clo">34</div>
                <div class="clo">33</div>
                <div class="clo">32</div>
                <div class="clo">31</div>
            </div>
            <div class="row">
                <div class="clo">21</div>
                <div class="clo">22</div>
                <div class="clo">23</div>
                <div class="clo">24</div>
                <div class="clo">25</div>
                <div class="clo">26</div>
                <div class="clo">27</div>
                <div class="clo">28</div>
                <div class="clo">29</div>
                <div class="clo">30</div>
            </div>
            <div class="row">
                <div class="clo">20</div>
                <div class="clo">19</div>
                <div class="clo">18</div>
                <div class="clo">17</div>
                <div class="clo">16</div>
                <div class="clo">15</div>
                <div class="clo">14</div>
                <div class="clo">13</div>
                <div class="clo">12</div>
                <div class="clo">11</div>
            </div>
            <div class="row">
                <div class="clo">1</div>
                <div class="clo">2</div>
                <div class="clo">3</div>
                <div class="clo">4</div>
                <div class="clo">5</div>
                <div class="clo">6</div>
                <div class="clo">7</div>
                <div class="clo">8</div>
                <div class="clo">9</div>
                <div class="clo">10</div>
            </div>
        </div>
        <div class="main-last">
            <div class="top">
                这里是玩家
            </div>
            <canvas width="300" height="200"></canvas>
            <div class="bottom">
                <button id="endBtn">停 止</button>
                <button id="startBtn">开 始</button>
            </div>
        </div>
    </div>
</body>
<script src="./zdog.dist.min.js"></script>
<script src="./script.js"></script>
<script src="./index.js"></script>
</html>